<template>
  <div>
    <el-input disabled>
      <el-button slot="append" icon="el-icon-s-grid" @click="openModal" />
    </el-input>

    <desktop-set-modal ref="model" @ok="handleOK" />
  </div>
</template>

<script>
import DesktopSetModal from './DesktopSetModal'
export default {
  name: 'DesktopSet',
  components: {
    DesktopSetModal
  },
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    width: {
      type: Number,
      default: 500,
      required: false
    },
    value: {
      type: String,
      default: '',
      required: false
    },
    disabled: {
      type: Boolean,
      required: false,
      default: false
    }

  },
  data() {
    return {
      visible: false

    }
  },
  // watch: {
  //   value: {
  //     immediate: true,
  //     handler: 'handleValue'
  //   }
  // },
  methods: {
    openModal() {
      this.$refs.model.show(this.value)
    },
    handleOK(value) {
      this.$emit('changeSelect', JSON.stringify(value))
    }
  }
}
</script>

<style scoped>
</style>
